<template>
  <div class="user-info">
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <el-avatar
          size="small"
          src="http://localhost:8083/images/bbd4fcba-4dd3-4602-a537-1b643031362f.png"
        ></el-avatar>
        <span>{{ name }}</span>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item icon="el-icon-circle-close" @click="handelExitClick"
            >退出登录</el-dropdown-item
          >
          <el-dropdown-item command="A">修改密码</el-dropdown-item>
          <el-dropdown-item command="B">系统管理</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dialog v-model="dialogFormVisible" title="修改密码">
      <el-form :model="form">
        <el-form-item label="账号" label-width="100px">
          <el-input v-model="form.userName" />
        </el-form-item>
        <el-form-item label="新密码" label-width="100px">
          <el-input v-model="form.password" />
        </el-form-item>
        <el-form-item label="旧密码" label-width="100px">
          <el-input v-model="form.passwordold" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handelupdataClick">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, reactive } from 'vue'
import { useStore } from '@/store'
import LocalCache from '@/utils/cache'
import router from '@/router'
import cache from '@/utils/cache'
import { ChangePassword } from '@/service/main/curd/curd'
import { ElMessage } from 'element-plus'

export default defineComponent({
  setup() {
    const store = useStore()
    const name = computed(() => cache.getCache('userInfo').userName)
    const dialogFormVisible = ref(false)
    const form = reactive({ userName: '', password: '', passwordold: '' })
    const handelExitClick = () => {
      LocalCache.deleteCache('userInfo')
      router.push('/main')
    }
    const handleCommand = (command: string | number) => {
      console.log(command.toString())
      if (command.toString() == 'A') {
        console.log('aa')
        dialogFormVisible.value = true
      }
    }
    const handelupdataClick = async () => {
      const { status, data } = await ChangePassword({ ...form })
      if (status == 200) {
        ElMessage({
          message: `${data}`,
          type: 'success'
        })
      }
      dialogFormVisible.value = false
    }
    return {
      name,
      handelExitClick,
      dialogFormVisible,
      form,
      handelupdataClick,
      handleCommand
    }
  }
})
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>
